<!-- 规格 -->
<template>
  <view>
    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u--input
              customStyle="height:100%;width: 90%;margin: auto;"
              placeholderStyle="color: #fff;"
              placeholder="搜索或添加规格"
              border="none"
              color="#fff"
              shape="circle"
              v-model="keywords"
              @confirm="searchChange"
            >
              <clIcon
                slot="prefix"
                type="icon-sousuo_o"
                color="#fff"
                size="25"
              ></clIcon>
            </u--input>
          </view>
        </template>
      </view>
    </hx-navbar>
    <view class="u-page m-t-140">
      <view class="color-list">
      	<view class="color-item" @click.stop="go(item)" v-for="(item,index) in indexList" :key="item.value">
			<liu-swipe-action ref="swipe" :index="index" @clickItem="clickItem">
				<view class="p-l-20 p-r-20">
					{{item.label}}
				</view>
			</liu-swipe-action>
      	</view>
      </view>
    </view>
	<!-- 添加规格 -->
	<u-popup :show="show" :round="10" mode="center" :closeOnClickOverlay="false">
		<view class="popup-view">
			<view class="title">
				{{isEdit?'编辑规格':'新增规格'}}
			</view>
			<view class="form-view m-b-40">
				<view class="form-item m-b-40">
					<u--input
					    border="surround"
					    v-model="params.spec"
					  ></u--input>
				</view>
				<view class="form-item">
					<view class="value flex" style="flex: 0; padding-left: 0;">
						<u-switch v-model="params.isDefault"></u-switch>
					</view>
					<view class="label p-l-20" style="flex: inherit;">
						默认
					</view>
				</view>
			</view>
			<view class="bot-view flex flex-sa">
				<view class="btn" @click="onCencal">
					取消
				</view>
				<view class="btn" @click="onConfirm">
					确定
				</view>
			</view>
		</view>
	</u-popup>
	
	
	
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
import {
  listOptionsBySpuId,
  saveBatch,
  updateById,
  deleteById
} from "@/apis/inventory/specifications";
export default {
  components: {
    clIcon,
  },
  data() {
    return {
      keywords: null,
      indexList: [],
      config: {
        title: "选择规格",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
        ],
      },
	  show: false,
	  params: {
		"isDefault": false,
		"isEnable": true,
		"spec": "",
		"spuId": ''
	  },
	  // 是否编辑
	  isEdit: false,
	  index: 0
    };
  },
  onLoad() {
	let {title, spuid} = this.$Route.query;
	this.config.title = title||'';
	this.params.spuId = spuid||'';
	this.initData();
  },
  methods: {
    go(val) {
		let {type} = this.$Route.query;
		if(type == 'list') {
			// 返回上一级并传输参数
			uni.navigateBack()
			uni.$emit('specData',val)
		}
    },
    // 获取数据
    initData() {
      listOptionsBySpuId(this.params.spuId).then((res) => {
        this.keywords = null;
        if (!res.flag) return;
        this.indexList = res.data;
      });
    },
	// 搜索过滤
    searchChange() {
		if(this.keywords) {
			this.indexList = this.indexList.filter(item=>{
				return item.label == this.keywords
			})
		} else {
			this.indexList = [];
			this.initData();
		}
    },
    clickBtn(item) {
      if (item.key === "btn1") {
        this.show = true
		this.isEdit = false
      }
    },
	// 取消弹框
	onCencal() {
		this.show = false
		this.params.isDefault = false
		this.params.spec = ''
		// 重置滑块
		this.$refs.swipe[this.index].reset()
	},
	// 确定
	onConfirm() {
		if(!this.params.spec) {
			uni.showToast({
				title: '请输入规格',
				icon: 'none'
			})
			return
		}
		if(this.isEdit) {
			updateById(this.params).then(res=>{
				if (!res.flag) return;
				this.onCencal()
				uni.showToast({
					title: res.data
				})
				this.initData()
			})
		} else {
			saveBatch([this.params]).then(res=>{
				if (!res.flag) return;
				this.onCencal()
				uni.showToast({
					title: '新增成功'
				})
				this.initData()
			})
		}
		
	},
	clickItem(val) {
		let {index, id} = val;
		let _thisData = this.indexList[index]
		this.index = index
		if(id=='1') {
			// 编辑
			this.show = true;
			this.isEdit = true
			this.params.spec = _thisData.label;
			this.params.id = _thisData.value;
			// this.params.isDefault = _thisData.isDefault;
		} else {
			// 删除
			uni.showModal({
				content:'确定是否删除当前规格？',
				success: (res) => {
					if(res.confirm) {
						deleteById(_thisData.value).then(res=>{
							if (!res.flag) return;
							uni.showToast({
								title: '删除成功'
							})
							this.initData()
						})
					} else {
						this.$refs.swipe[this.index].reset()
					}
					
				}
			})
		}
	}
  },
};
</script>

<style lang="scss" scoped>
.input-product {
  width: 95%;
  padding: 0 20upx;
  margin: 30upx auto;
  border: 1px solid #fff;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
  display: flex;
}
.color-list {
	background-color: #fff;
	.color-item {
		height: 80rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #eee;
		line-height: 80rpx;
	}
}
</style>
